<template>
	<view class="goodsOrderDetails">
		<view class="area-title">{{ statusType[orderDetails.status] }}</view>
		<view class="nearby_address_item">
			<view class="nearby_item_img">
				<image :src="orderDetails.team_info.image" mode=""></image>
			</view>
			<view class="nearby_info">
				<view class="nearby_info_left">
					<view class="fn-sz-30 fn-cl-333333 mar-bottom-18">{{ orderDetails.team_info.name }}</view>
					<view class="fn-sz-26 fn-cl-666666">{{ orderDetails.team_info.address }}</view>
				</view>
				<!-- <view class="address_distance"><span class="fn-sz-26 fn-cl-666666">0.4KM</span></view> -->
			</view>
		</view>
		<view class="area-box">
			<view class="address_left_box">
				<view class="address_icon">
					<image src="../../static/images/icon/icon_gps1.png" mode=""></image>
				</view>
				<view class="address_info_box">
					<view class="address_name">
						{{orderDetails.address.address}}
						<span v-if="orderDetails.address.num"> {{orderDetails.address.num}}</span>——
						{{orderDetails.address.province}}
						{{orderDetails.address.city}}
						{{orderDetails.address.county}}

					</view>
					<view class="address_info_desc">
						<span class="mar-right-20">{{orderDetails.address.fullname}}</span>
						<span>{{maskPhoneNumber(orderDetails.address.phone)}}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="area-title" v-if="orderDetails.get_time || orderDetails.deliver_time">时间信息</view>
		<view class="area-box" v-if="orderDetails.get_time || orderDetails.deliver_time">
			<view class="inner-row-box" v-if="orderDetails.deliver_time">
				<view class="inner-row-box-title">发货时间</view>
				<view class="inner-row-box-text">{{ orderDetails.deliver_time }}</view>
			</view>
			<view class="inner-row-box">
				<view class="inner-row-box-title">取货时间</view>
				<view class="inner-row-box-text">{{ orderDetails.get_time }}</view>
			</view>
		</view>
		<view class="area-title" v-if="isGrouper">用户信息</view>
		<view class="area-box big_grouper_user_box" v-if="isGrouper">
			<view class="grouper_user_box">
				<view class="row-box-flex">
					<view class="row-box-flex-title">用户名</view>
					<view class="row-box-flex-text">{{ orderDetails.real_name }}</view>
				</view>
				<view class="row-box-flex">
					<view class="row-box-flex-title">联系电话</view>
					<view class="row-box-flex-text">{{ orderDetails.user_mobile }}</view>
				</view>
			</view>
			<button class="yellow_btn" @tap="callPhone(orderDetails.user_mobile)">联系TA</button>
		</view>
		<view class="area-title" v-if="orderDetails.deliver">配送信息</view>
		<view class="area-box" v-if="orderDetails.deliver">
			<view class="row-box-flex">
				<view class="row-box-flex-title">配送人员</view>
				<view class="row-box-flex-text">{{ orderDetails.deliver }}</view>
			</view>
			<view class="row-box-flex">
				<view class="row-box-flex-title">联系方式</view>
				<view class="row-box-flex-text">{{ orderDetails.deliver_phone }}</view>
			</view>
		</view>
		<view class="area-title" v-if="orderDetails.status == 'done'">评价信息</view>
		<view class="area-box" v-if="orderDetails.status == 'done'">
			<view class="goods_comment_box" v-for="(commentItem, index) in orderDetails.product" :key="index"
				v-if="commentItem.comment_status == 1">
				<Rate :gutter="5" :size="22" :value="commentItem.star" :readonly="true"></Rate>
				<view class="fn-sz-28 fn-cl-222222 mar-bottom-20">{{ commentItem.content }}</view>
				<view class="goods_comment_img_list">
					<image :src="imgItem" mode="" v-for="(imgItem, index) in commentItem.images" :key="index"></image>
				</view>
			</view>
		</view>
		<view class="area-title" v-if="orderDetails.refund_reason">售后信息</view>
		<view class="area-box" v-if="orderDetails.refund_reason">
			<view class="row-box-flex">
				<view class="row-box-flex-title">售后类型</view>
				<view class="row-box-flex-text">换货</view>
			</view>
			<view class="reason_box">
				<view class="reason_text">{{ orderDetails.refund_reason }}</view>
				<view class="reason_img_list">
					<view class="reason_img_item" v-for="(imgItem, index) in orderDetails.refund_images" :key="index"
						@tap="$helper.preview(orderDetails.refund_images, index)">
						<image :src="imgItem" mode=""></image>
					</view>
				</view>
			</view>
			<view class="row-box-flex" v-if="orderDetails.refuse_reason">
				<view class="row-box-flex-title">拒绝原因</view>
				<view class="row-box-flex-text">{{ orderDetails.refuse_reason }}</view>
			</view>
		</view>
		<view class="area-title">商品信息</view>
		<view class="order_goods_info_list">
			<view class="order_goods_info_item" v-for="(proItem, index) in orderDetails.product" :key="index">
				<view class="goods_img" @tap="goGoodsDesc(proItem.team_product_id)">
					<image :src="proItem.image" mode=""></image>
				</view>
				<view class="order_goods_info">
					<view class="mar-bottom-40 fn-sz-30 more-text2">{{ proItem.product_name }}</view>
					<view class="mar-bottom-10">
						<span class="fn-sz-22 fn-cl-F34035">￥</span>
						<span class="fn-sz-30 fn-cl-F34035">{{ proItem.price }}</span>
					</view>
					<view class="fn-cl-999999 fn-sz-26">
						<span class="mar-right-10">数量:</span>
						<span>x{{ proItem.num }}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="area-title">订单信息</view>
		<view class="area-box">
			<view class="row-box-flex">
				<view class="row-box-flex-title">订单编号</view>
				<view class="row-box-flex-text">{{ orderDetails.order_sn }}</view>
			</view>
			<view class="row-box-flex">
				<view class="row-box-flex-title">变更时间</view>
				<view class="row-box-flex-text">{{ orderDetails.update_time }}</view>
			</view>
			<view class="row-box-flex" v-if="orderDetails.get_time">
				<view class="row-box-flex-title">送货时间</view>
				<view class="row-box-flex-text">{{ orderDetails.get_time }}</view>
			</view>
			<view class="row-box-flex">
				<view class="row-box-flex-title">是否自提</view>
				<view class="row-box-flex-text">{{ orderDetails.get_type==2?'是':'否' }}</view>
			</view>
			<view class="row-box-flex">
				<view class="row-box-flex-title">订单金额</view>
				<view class="row-box-flex-text">￥{{ orderDetails.total_price }}</view>
			</view>
			<view class="row-box-flex">
				<view class="row-box-flex-title">商品金额</view>
				<view class="row-box-flex-text">￥{{ orderDetails.total_price }}</view>
			</view>
			<view class="row-box-flex">
				<view class="row-box-flex-title">优惠金额</view>
				<view class="row-box-flex-text">￥{{ orderDetails.coupon_price }}</view>
			</view>
			<view class="row-box-flex">
				<view class="row-box-flex-title">会员减免</view>
				<view class="row-box-flex-text">
					<!-- <span class="fn-cl-666666"
						v-if="orderDetails.cut_price != '0.00'">-￥{{ orderDetails.cut_price }}</span> -->
					<span class="fn-cl-666666">￥{{ orderDetails.cut_price }}</span>
				</view>
			</view>
			<view class="row-box-flex">
				<view class="row-box-flex-title">配送费用</view>
				<view class="row-box-flex-text">￥{{ orderDetails.deliver_price }}</view>
			</view>
			<view class="row-box-flex">
				<view class="row-box-flex-title">优惠金额</view>
				<view class="row-box-flex-text">￥{{ orderDetails.coupon_price }}</view>
			</view>
			<view class="row-box-flex">
				<view class="row-box-flex-title">积分抵扣</view>
				<view class="row-box-flex-text">￥{{ orderDetails.score_price }}</view>
			</view>
			<view class="row-box-flex">
				<view class="row-box-flex-title">金币抵扣</view>
				<view class="row-box-flex-text">￥{{ orderDetails.coin_price }}</view>
			</view>
			<view class="row-box-flex">
				<view class="row-box-flex-title">支付金额</view>
				<view class="row-box-flex-text">￥{{ orderDetails.order_price }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Rate from '../../components/rate/rate.vue';
	export default {
		components: {
			Rate
		},
		data() {
			return {
				order_id: '',
				orderDetails: {},
				statusType: {
					cancel: '已取消',
					unpay: '待付款',
					payed: '待配送',
					deliver: '配送中',
					wait_comment: '待评价',
					done: '已完成',
					sale_service: '售后',
					wait: '待审核',
					accept: '已退款',
					refuse: '审核拒绝'
				},
				isGrouper: false
			};
		},
		onLoad(val) {
			if (val.order_id) {
				this.order_id = val.order_id;
				this.getOrderDetail();
			}
			console.log(val.role, 'ssssssss');
			if (val.role) {
				this.isGrouper = JSON.parse(val.role);
			}
		},
		methods: {
			getOrderDetail() {
				this.$api.getOrderDetail({
					order_id: this.order_id
				}).then(res => {
					console.log(res, '订单详情');
					this.orderDetails = res.data;
				});
			},
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			goGoodsDesc(id) {
				uni.navigateTo({
					url: `/pages/shop/shopDetails?product_id=${id}`
				});
			},
			maskPhoneNumber(phoneNumber) {
				// 检查输入是否是一个字符串并且长度为11
				// if (typeof phoneNumber !== 'string' || phoneNumber.length !== 11) {
				//   throw new Error('请输入有效的11位手机号码字符串');
				// }

				// 使用字符串切片和拼接的方式替换中间四位为星号
				const maskedPhoneNumber = phoneNumber.slice(0, 3) + '****' + phoneNumber.slice(7);
				return maskedPhoneNumber;
			}
		}
	};
</script>

<style lang="scss">
	.goodsOrderDetails {
		min-height: 100vh;
		background-color: #f9f9f9;
		padding: 24rpx;

		.nearby_address_item {
			display: flex;
			background-color: #fff;
			border-radius: 6rpx;
			padding: 20rpx 20rpx;
			margin-bottom: 40rpx;

			.nearby_item_img {
				margin-right: 20rpx;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
				}
			}

			.nearby_info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex: 1;

				.nearby_info_left {}

				.address_distance {}
			}
		}

		.area-box {
			padding: 26rpx 24rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 40rpx;

			.inner-row-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				margin-bottom: 20rpx;

				&:nth-last-child(1) {
					margin-bottom: 0;
				}

				.inner-row-box-title {}

				.inner-row-box-text {
					font-size: 28rpx;
				}
			}

			.row-box-flex {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				&:nth-last-child(1) {
					margin-bottom: 0;
				}

				.row-box-flex-title {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
					margin-right: 30rpx;
				}

				.row-box-flex-text {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}
			}

			.reason_box {
				.reason_text {
					margin-top: 12rpx;
					margin-bottom: 20rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
				}

				.reason_img_list {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.reason_img_item {
						margin-right: 27rpx;
						flex: none;
						margin-bottom: 10rpx;

						image {
							width: 180rpx;
							height: 180rpx;
							border-radius: 8rpx;
						}

						&:nth-child(3n) {
							margin-right: 0rpx;
						}
					}
				}
			}
		}

		.order_goods_info_list {
			margin-bottom: 40rpx;

			.order_goods_info_item {
				display: flex;
				padding: 31rpx 25rpx;
				background: #ffffff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.goods_img {
					margin-right: 17rpx;

					image {
						width: 180rpx;
						height: 180rpx;
						border-radius: 8rpx;
					}
				}

				.order_goods_info {
					padding-top: 7rpx;
				}
			}
		}

		.goods_comment_box {
			.goods_comment_img_list {
				display: flex;

				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 12rpx;
					margin-right: 27rpx;
					margin-bottom: 15rpx;

					&:nth-child(3n) {
						margin-right: 0;
					}
				}
			}
		}

		.big_grouper_user_box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.grouper_user_box {
				flex: 1;
			}

			.yellow_btn {
				flex: none;

				width: 150rpx;
				height: 58rpx;
				font-size: 24rpx;
				line-height: 58rpx;
				border-radius: 33rpx;
				padding: 0;
			}
		}

		.address_left_box {
			display: flex;
			align-items: center;

			.address_icon {
				width: 32rpx;
				height: 39rpx;
				margin-right: 20rpx;
				flex: none;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.address_info_box {
				.address_name {
					font-weight: 500;
					font-size: 34rpx;
					color: #333333;
					margin-bottom: 10rpx;
				}

				.address_info_desc {
					font-size: 28rpx;
					color: #999999;
				}
			}
		}
	}
</style>